﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    
	<title>Supermercado COTO - Registracion</title>
	
	<link rel="stylesheet" href="estilos/estilo.css" />
	
    <style type="text/css">
            .style1
            {
                text-align: right;
                width: 398px;
            }
            .style2
            {
                text-align: right;
                width: 398px;
                height: 25px;
            }
        #Checkbox4
        {
            margin-left: 0px;
        }
   </style>

  <script language="javascript" type="text/javascript">

         function camposObligatorios(formulario) {
                if (document.getElementById("nombreUsuario").value == "" || document.getElementById("password1").value == "" || document.getElementById("password2").value == "" || document.getElementById("nombres").value == "" || document.getElementById("apellidos").value == "" || document.getElementById("documento").value == "" || document.getElementById("correo").value == "" || document.getElementById("telefono").value == "") {
                    alert("Debe completar con todos los datos.");
                    document.getElementById("nombreUsuario").focus();
                    return false;
                }
                else if (!document.getElementById("Checkbox3").checked) {
                    alert("Debe leer las condiciones.");
                    document.getElementById("Checkbox3").focus();
                    return false;
                }  
				else if(document.getElementById("password1").value != document.getElementById("password2").value ){
					alert("Las contraseñas deben coincidir.");
					document.getElementById("password1").focus();
					return false;
	            }
				else
				{
					return true;
				}
				
            }
  </script>
</head>
<body>
<!-- Contenido -->

	<div id="contenidoRegistro">

    <h1 style="text-align:center; font-family: 'Courier New', Courier, 'espacio sencillo'; color: #993333;" 
        align="right"> Bienvenido al registro de Supermercados COTO</h1>


    <p>Con los datos que amablemente nos proporciones podremos saber que tipo de 
        información es mas relevante para ti, para que podamos ofrecerte mejor 
        contenido. Tus datos seran confidenciales y de uso exclusivo de esta web, 
        resguardados bajo altas normas de seguridad.</p>
    <h5> Los beneficios por registrarse son:</h5>
    <p> - Podras realizar compras por internet.<br />
        - Informarte diariamente de nuestras fabulosas ofertas.<br />
        - Personalizar la información de la web.<br />
        - Participar con comentarios, y sugerencias hacia nuestro servicio y atención.</p>
    <p>
        Gracias por tu colaboración.</p>

    <form  onsubmit="return camposObligatorios()" action="gracias.html" style="overflow:auto" name="form1" >
    <table style="width: 100%; height: 85px;">
        <tr>
            <td class="style1">
                Nombre del Usuario:</td>
            <td>
                <input id="nombreUsuario" type="text" /></td>
        </tr>
        <tr>
            <td class="style1">Contraseña:</td>
            <td>
                <input id="password1" type="password" /></td>
        </tr>
        <tr>
            <td class="style1">Repetir Contraseña:</td>
            <td>
                <input id="password2" type="password" /></td>
        </tr>
        <tr>
            <td class="style2">Nombres:</td>
            <td>
                <input id="nombres" type="text" /></td>
        </tr>
        <tr>
            <td class="style1">Apellidos:</td>
            <td>
                <input id="apellidos" type="text" /></td>
        </tr>
        <tr>
            <td class="style1">D.N.I.:</td>
            <td>
                <input id="documento" type="text" /></td>
        </tr>
        <tr>
            <td class="style1">E-mail:</td>
            <td>
                <input id="correo" type="text" onclick="return Text5_onclick()" /></td>
        </tr>
        <tr>
            <td class="style1">Teléfono:</td>
            <td>
                <input id="telefono" type="text" /></td>
        </tr>
        <tr>
            <td class="style1">Sexo:</td>
            <td>
                <input value="M" name="sexo" type="radio">Masculino
                <input value="F" name="sexo" type="radio">Femenino
        </tr>
        <tr>
            <td class="style1">País:</td>
            <td>
                <select id="pais" name="pais">
                    <option value="Arg">Argentina</option>
                    <option value="Bol">Bolivia</option>
                    <option value="Bra">Brasil</option>
                    <option value="Ch">Chile</option>
                    <option value="Urug">Uruguay</option>
                </select>
           </td>
        </tr>
        <tr>
            <td class="style1">Provincia / Estado:</td>
            <td>
                <select id="provincia" name="provincia">
                    <option value="SF">Santa Fe</option>
                    <option value="BA">Buenos Aires</option>
                    <option value="Cord">Cordoba</option>
                    <option value="ER">Entre Rios</option>
                    <option value="Neq">Neuquen</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="style1">Ciudad:</td>
            <td>
                <select id="ciudad" name="ciudad">
                    <option value="Raf">Rafaela</option>
                    <option value="Sunch">Sunchales</option>
                    <option value="Sgo">Santiago</option>
                    <option value="Rrio">Rosario</option>
                    <option value="SF">Santa Fe</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="style1">Fecha de Nacimiento:</td>
            <td>&nbsp;&nbsp;
            
              <b>Dia</b>  
                    <select id="dia" name="day">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="...">...</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;&nbsp;  
                <b>Mes</b>
                    <select id="mes" name="month">
                        <option value="Enero">Enero</option>
                        <option value="Febrero">Febrero</option>
                        <option value="Marzo">Marzo</option>
                        <option value="Abril">Abril</option>
                        <option value="Mayo">Mayo</option>
                        <option value="Junio">Junio</option>
                        <option value="Julio">Julio</option>
                        <option value="Agosto">Agosto</option>
                        <option value="Septiembre">Septiembre</option>
                        <option value="Octubre">Octubre</option>
                        <option value="Noviembre">Noviembre</option>
                        <option value="Diciembre">Diciembre</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;&nbsp;
              <b>Anio</b>
                    <select id="anio" name="year">
                        <option value="1984">1984</option>
                        <option value="1985">1985</option>
                        <option value="1990">1990</option>
                        <option value="1992">1992</option>
                        <option value="1993">1993</option>
                        <option value="...">...</option>
                    </select>
           </td>
        </tr>
        <tr>
            <td class="style1">Estado Civil:</td>
            <td>
                <select id="estadocivil" name="estadocivil">
                    <option value="Soltero">Soltero</option>
                    <option value="Casado">Casado</option>
                    <option value="Viudo">Viudo</option>
                    <option value="Comprometido">Comprometido</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="style1">
                Ocupación:</td>
            <td>
                <input id="Text8" type="text" /></td>
        </tr>
        <tr>
            <td class="style1">
                Foto:</td>
            <td>
                <input id="File1" type="file" /></td>
        </tr>
        <tr>
            <td colspan="2">
                Términos y Condiciones</td>
        </tr>
        <tr>
            <td colspan="2">
                <input id="Checkbox3" type="checkbox" />Afirmo haber leído y estar de acuerdo con los términos y condiciones del servico.</td>
        </tr>
        <tr>
            <td colspan="2">
                <input id="Checkbox4" type="checkbox" checked="checked" />Deseo recibir un boletín de noticias.</td>
        </tr>
        <tr>
            <td align="center" class="style1">
                <input id="Aceptar_Registro" type="submit" value="Registrarse" /></td>
            <td>
                <input id="Cancelar_Registro" type="reset" value="Cancelar" /></td>
        </tr>
    </table>
    </form>
    </div>
</body>
</html>
